

<!--
  规范：写明组件名称
  加载效果 - 平行大小改变球
-->
<spin-bounce>

  <style scoped>
  .spinner {
    width: 70px;
    text-align: center;
  }
  .spinner > div {
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  }
  .spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
  }
  .spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
  }
  @-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0) }
    40% { -webkit-transform: scale(1.0) }
  }
  @keyframes sk-bouncedelay {
    0%, 80%, 100% {
      -webkit-transform: scale(0);
      transform: scale(0);
    } 40% {
      -webkit-transform: scale(1.0);
      transform: scale(1.0);
    }
  }
  </style>

  <div class="spinner">
    <div each="{n in [1,2,3]}" class="bounce{n}" style="
      width: {parent.opts.size||'20'}px;
      height: {parent.opts.size||'20'}px;
      background-color: {parent.opts.color||'#333'}
    "></div>
  </div>

  <script>

  /**
   * 规范：组件可传入参数需要在 script 头部注释说明
   * size=图形大小像素
   * color=颜色
   */

  </script>

</spin-bounce>


<!--
  规范：写明组件名称
  加载效果 - 渐变圆
-->
<spin-fade-circle>

  <style scoped>
  .spinner {
    border-radius: 100%;
    -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
    animation: sk-scaleout 1.0s infinite ease-in-out;
  }
  @-webkit-keyframes sk-scaleout {
    0% { -webkit-transform: scale(0) }
    100% {
      -webkit-transform: scale(1.0);
      opacity: 0;
    }
  }
  @keyframes sk-scaleout {
    0% {
      -webkit-transform: scale(0);
      transform: scale(0);
    } 100% {
      -webkit-transform: scale(1.0);
      transform: scale(1.0);
      opacity: 0;
    }
  }
  </style>

  <div class="spinner" style="width: {opts.size||'20'}px; height: {opts.size||'20'}px; background-color: {opts.color||'#333'}"></div>

  <script>

  /**
   * 规范：组件可传入参数需要在 script 头部注释说明
   * size=图形大小像素
   * color=颜色
   */

  </script>

</spin-fade-circle>
